var weatherIcons = {
    'Sunny': './data/asset/img/weather/sunny_128.png',
    'Cloudy': './data/asset/img/weather/cloudy_128.png',
    'Showers': './data/asset/img/weather/showers_128.png'
};

option = {
    title: {
        text: '天气情况统计',
        subtext: '虚构数据',
        left: 'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "{b} <br/>{a} : {c} ({d}%)"
    },
    legend: {
        // orient: 'vertical',
        // top: 'middle',
        bottom: 10,
        left: 'center',
        data: ['西凉', '益州','兖州','荆州','幽州']
    },
    series : [
        {
            name:'天气状况',
            type: 'pie',
            radius : '65%',
            center: ['50%', '50%'],
            selectedMode: 'single',
            data:[
                {
                    value:1548,
                    name: '幽州',
                    key:0,
                    label:{}
                },
                {value:535, name: '荆州',key:1,},
                {value:510, name: '兖州',key:2,},
                {value:634, name: '益州',key:3,},
                {value:735, name: '西凉',key:4,}
            ],
            itemStyle: {
                emphasis: {
                    // shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
    
        }]
};
myChart.on('click',function (params) {
    // 点击显示label内容，data中的数据是对象，通过点属性名即创建属性;参数的使用方式是{}
    params.data.label = {
                        normal: {
                            formatter: [
                                '{title|{b}}{abg|}',  
                                '  {weatherHead|天气}{valueHead|天数}{rateHead|占比}',
                                '{hr|}',
                                '  {Sunny|}{value|{c}}{rate|{d}%}',
                                '  {Cloudy|}{value|142}{rate|38.9%}',
                                '  {Showers|}{value|21}{rate|5.8%}'
                            ].join('\n'),
                            backgroundColor: '#eee',
                            borderColor: '#777',
                            borderWidth: 1,
                            borderRadius: 4,
                            rich: {
                                title: {
                                    color: '#eee',
                                    align: 'center'
                                },
                                abg: {
                                    backgroundColor: '#333',
                                    width: '100%',
                                    align: 'right',
                                    height: 25,
                                    borderRadius: [4, 4, 0, 0]
                                },
                                Sunny: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Sunny
                                    }
                                },
                                Cloudy: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Cloudy
                                    }
                                },
                                Showers: {
                                    height: 30,
                                    align: 'left',
                                    backgroundColor: {
                                        image: weatherIcons.Showers
                                    }
                                },
                                weatherHead: {
                                    color: '#333',
                                    height: 24,
                                    align: 'left'
                                },
                                hr: {
                                    borderColor: '#777',
                                    width: '100%',
                                    borderWidth: 0.5,
                                    height: 0
                                },
                                value: {
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'left'
                                },
                                valueHead: {
                                    color: '#333',
                                    width: 20,
                                    padding: [0, 20, 0, 30],
                                    align: 'center'
                                },
                                rate: {
                                    width: 40,
                                    align: 'right',
                                    padding: [0, 10, 0, 0]
                                },
                                rateHead: {
                                    color: '#333',
                                    width: 40,
                                    align: 'center',
                                    padding: [0, 10, 0, 0]
                                }
                            }
                        }
    };
    // 先将原始数据拷贝，然后进行改变
    var dataNew = [
        {
                    value:1548,
                    name: '幽州',
                    key:0
                },
                {value:535, name: '荆州',key:1,},
                {value:510, name: '兖州',key:2,},
                {value:634, name: '益州',key:3,},
                {value:735, name: '西凉',key:4,}
        ];
    // console.log( params.dataIndex)
   dataNew[params.dataIndex] = params.data

//    将需要显示在页面上的数据进行set
    myChart.setOption({
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: dataNew
        }]
    });
    // console.log(dataNew)
    
   
});



